define([
    'jquery',
    'underscore',
    'backbone',
    ], function($, _, Backbone){
        var $html_loadding = '<div class="caculation-report" style="text-align:center"><img src="'+$template_admincp_url+'images/preloaders/blue/4.gif"/></div>';
        var synceView = Backbone.View.extend({
            el: $("#main"),
            initialize: function(){
				
            },
            events: {
                
            },
            
            index: function(){
                var url = location.href;
                if(typeof oTable != "undefined"){
                    $("#table_synce").dataTable().fnDestroy();
                }
                oTable = $('#table_synce').dataTable({
                   "sDom": "<'row'<'col-lg-8'l><'col-lg-1 button_create'><'col-lg-3'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
                    "sPaginationType": "bootstrap",
                    "bJQueryUI": false,
                    "bAutoWidth": false,
                    "oLanguage": {
                        "sUrl": $base_url+"public/templates/admincp/js/language/datatable.vn.txt"
                    },
                    "sScrollX": "100%",
                    //"sScrollXInner": "100%",
                    "bScrollCollapse": true,
                    "iDisplayLength": 10,
                    "iDisplayStart": 0,
                    "bProcessing": true,
                    "bRetrieve": true,
                    "aaSorting": [],
                    "bServerSide": true,
                    "sAjaxSource": url,
                    "fnServerData": function(sSource, aoData, fnCallback, oSettings) {
                        if(typeof filters != "undefined"){
                            obj_tmp = new Object;
                            $.each(filters, function(name, value){
                                obj_tmp[name] = value;
                            });
                            aoData.push({
                                name: "myFilter",
                                value: JSON.stringify(obj_tmp)
                            });
                        }
                        $.ajax( {
                            "dataType": 'json',
                            "type": "POST",
                            "url": sSource,
                            "data": aoData,
                            success: function(rs){
                                ids = rs.my_id;
                                fnCallback(rs);
                            }
                        });

                    },
                    "aoColumns": [
                        {
                            // "mData": "admin_name",
                            "sType": "string",
                            "swidth": "25%",
                            "sClass": "string",
                            "sName": "synce_name"
                        },
                        {
                            // "mData": "admin_name",
                            "sType": "string",
                            "swidth": "25%",
                            "sClass": "string",
                            "sName": "synce_link"
                        },
                        {
                            // "mData": "action",
                            "sType": "string",
                            "swidth": "3%",
                            "sClass": "center",
                            "bSortable": false
                        }
                    ],

                    fnInitComplete: function()
                    {
                        $(this).slideDown(200);
                        $(".button_create").html('<button class="btn btn-primary btn-create" type="button">Create New</button>');
                        $(".btn-create").click(function(){
                            window.location.href = $admincp_url+'synce/add';
                        });
                        $(".synce").click(function(){
							var action = $(this).attr('action');
							var title = action.toLowerCase().replace(/\b[a-z]/g, function(letter) {
							    return letter.toUpperCase();
							});
							showLoading(title, $html_loadding);
							$(".messi").show(0, function(){
                            	$.ajax({
                                	url: $admincp_url + 'synce/process_'+action,
                                   	async: false,
									statusCode: {
									    404: function() {
									      	$('.caculation-report').html('<div style="width:100%;">'+
												'<span style="float:left"><strong><i class="icon24 i-warning"></i>Warning:</strong></span>'+
												'<span class="badge" style="float:right; padding:5px">Could not contact server.</span>'+
							   				'</div>');
									    },
									    500: function() {
											$('.caculation-report').html('<div style="width:100%;">'+
												'<span style="float:left"><strong><i class="icon24 i-warning"></i>Warning:</strong></span>'+
												'<span class="badge" style="float:right; padding:5px">A server-side error has occurred.</span>'+
							   				'</div>');
										}
									},
									error: function (xhr, textStatus, errorThrown) {
										$('.caculation-report').html('<div style="width:100%;">'+
												'<span style="float:left"><strong><i class="icon24 i-warning"></i>Warning:</strong></span>'+
												'<span class="badge" style="float:right; padding:5px">'+textStatus+'</span>'+
							   				'</div>');
							        },
                                    success: function(data){
										data = JSON.parse(data);
										$('.caculation-report').html(data.html);
                                	},
                            	});
                        	});
		                });
                    }
                });
                $('.dataTables_length select').uniform();
                $('.dataTables_paginate > ul').addClass('pagination');
            },

            add: function(){
                $("#form").validate({
                    ignore: null,
                    ignore: 'input[type="hidden"]',
                    submitHandler: function(form){
                        form.submit();
                    }
                });
            },

            edit: function(){
                $("#form").validate({
                    ignore: null,
                    ignore: 'input[type="hidden"]',
                    submitHandler: function(form){
                        form.submit();
                    }
                });
            },

            render: function(){
                if(typeof this[$app.action] != 'undefined'){
                    new this[$app.action];
                }
            }
        });
        return synceView = new synceView;
    });
